<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>用水监控</span>
        </div>
      </template>
      <div class="water-monitor">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">1,250</div>
                <div class="stat-label">今日用水量 (L)</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">15.6</div>
                <div class="stat-label">平均流量 (L/min)</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">98.5%</div>
                <div class="stat-label">设备运行率</div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>用水趋势图</span>
              </template>
              <div class="chart-container">
                <div class="chart-placeholder">用水趋势图表</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <template #header>
                <span>设备状态</span>
              </template>
              <div class="device-status">
                <el-table :data="deviceList" style="width: 100%">
                  <el-table-column prop="name" label="设备名称" />
                  <el-table-column prop="status" label="状态">
                    <template #default="scope">
                      <el-tag
                        :type="
                          scope.row.status === '正常' ? 'success' : 'danger'
                        "
                      >
                        {{ scope.row.status }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="flow" label="流量(L/min)" />
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";

const deviceList = ref([
  { name: "1号水泵", status: "正常", flow: "12.5" },
  { name: "2号水泵", status: "正常", flow: "15.2" },
  { name: "3号水泵", status: "故障", flow: "0" },
  { name: "4号水泵", status: "正常", flow: "18.6" },
]);
</script>

<style lang="scss" scoped>
.water-monitor {
  .stat-card {
    .stat-item {
      text-align: center;
      .stat-value {
        font-size: 32px;
        font-weight: bold;
        color: #1890ff;
        margin-bottom: 8px;
      }
      .stat-label {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .chart-container {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 4px;

    .chart-placeholder {
      color: #999;
      font-size: 16px;
    }
  }
}
</style>
